<template>
    <view class="warp">
        <view class="pc">
            <img src="../../static/images/common/logo.png" alt="">
        </view>
        <view class="conter">
            <u--form labelPosition="left" :model="model1" :rules="rules" ref="form1">
                <u-form-item label="" prop="userInfo.name" ref="item1">
                    <u--input v-model="model1.userInfo.name" border="none" placeholder="请输入手机号"></u--input>
                </u-form-item>
                <u-form-item label="" prop="userInfo.password" ref="item1">
                    <u--input v-model="model1.userInfo.password" border="none" placeholder="请输入密码(6-12位)"></u--input>
                </u-form-item>
                <view class="verification">
                    <text @click="geto_verification">验证码登录</text>
                </view>
                <button class="btn_login" @click="btn_login">登录</button>
                <view class="footer">
                    <text class="get_reg" @click="get_reg">注册账号</text>
                    <text class="wj" @click="get_wj">忘记密码</text>
                </view>
            </u--form>
        </view>
    </view>
</template>

<script>
import { get_login, get_reg } from "../../api/api"
export default {
    data() {
        return {
            model1: {
                userInfo: {
                    name: '15139349832',
                    password: ''
                }
            },
            rules: {
                'userInfo.name': {
                    type: 'string',
                    required: true,
                    pattern: /^[1][3,4,5,7,8][0-9]{9}$/,

                    message: '请填写手机号',
                    trigger: ['blur', 'change']
                },
                'userInfo.password': {
                    type: 'string',

                    required: true,
                    message: '请输入密码',
                    trigger: ['blur', 'change']
                },
            },
        }
    },
    methods: {
        //去验证码登录页面
        geto_verification() {
            uni.navigateTo({ url: '/pages/verification/verification' })
        },
        //登录
        btn_login() {
            let { name, password } = this.model1.userInfo
            console.log(name)
            if (!/^1[3-9]\d{9}$/.test(name)) {
                // this.$toast('手机号码格式错误');
                console.log("手机号码格式错误")
                return;
            }
            if (!/^\w{6,12}$/.test(password)) {
                // this.$toast('密码格式错误');
                console.log("密码格式错误")
                return;
            }
            get_login({
                username: name,
                password: password
            }).then(res => {
                console.log("1234")
                console.log(res)

                let { token, tokenExpired, uid, userInfo, username } = res

                if (res.code == 0) {
                    //存放数据到本地储存
                    uni.setStorageSync('token', token)
                    uni.setStorageSync('tokenExpired', tokenExpired)
                    uni.setStorageSync('uid', uid)
                    uni.setStorageSync('userInfo', userInfo)
                    uni.setStorageSync('username', username)
                    //存放数据到vuex
                    this.$store.commit('change', { key: "uid", value: uid, })
                    this.$store.commit('change', { key: "tokenExpired", value: tokenExpired, })
                    this.$store.commit('change', { key: "userInfo", value: userInfo, })
                    this.$store.commit('change', { key: "username", value: username, })
                    this.$store.commit('change', { key: "token", value: token, })
                    uni.reLaunch({
                        url: '/pages/index/index'
                    })
                }

            })
        },
        //去注册
        get_reg() {
            uni.navigateTo({
                url: '/pages/reg/reg'
            })
        },
        //去忘记密码页
        get_wj() {
            uni.navigateTo({
                url: '/pages/wjpassword/wjpassword'
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.warp {
    .pc {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    img {
        width: 50px;
        height: 50px;

    }

    .conter {
        width: 85%;
        margin: 0 auto;

        .verification {
            width: 100%;
            display: flex;
            justify-content: right;
            color: #fdd100;
        }

        .btn_login {
            width: 80%;
            height: 40px;
            margin: 15px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fdd100;
            color: #fff;
            border-radius: 25px;
        }

        .footer {
            width: 100%;
            height: 40px;
            font-size: 14px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            align-items: center;

            .get_reg {
                color: #fdd100;
            }

            .wj {
                color: #d3d4d3;
            }
        }

    }
}
</style>